<template>
    <!-- <div class="box">
    </div> -->
    <v-stage :config="configKonva" id="stage-parent">
        <v-layer>
            <v-image :config="{
                width:configKonva.width,
                height:configKonva.height,
                image:imageObj?.bgImage?.src,
            }" />
            <v-circle :config="{...configCircle,x:100 + index * 0.5 * Math.random(),y:100 + index * 0.3 * Math.random()}" v-for="(item,index) in list"></v-circle>
        </v-layer>
    </v-stage>

</template>

<script setup>
import { reactive, ref,onMounted } from 'vue'
import { useScreenOrientation } from '@vueuse/core'
const list = Array.from(new Array(500));
const {
  isSupported,
  orientation,
  angle,
  lockOrientation,
  unlockOrientation,
} = useScreenOrientation()
const configKonva=reactive({
    width:1920,
    height:1080,
    scale:{x:1,y:1},
})
//待加载
const imageList = [{
    ref:'bgImage',
    src:'src/assets/image/bg-game.jpg'
},]
    
const imageObj = reactive({
    bgImage:{
        url:'src/assets/image/test.png',
    }, 
})
const bgImage = ref(null);
const configCircle = ref({
        // x: 100,
        // y: 100,
        radius: 70,
        fill: "red",
        stroke: "black",
        strokeWidth: 4,
        draggable: true
    })

const hanLoadeImages = () =>{
    for (let key in imageObj) {
        const image = new window.Image();
        image.src = imageObj[key].url;
        image.onload = () => {
            imageObj[key].src = image;
        };
    }
}
const sceneWidth = 1920;
const sceneHeight = 1080;
const bgImg = reactive({
    width:1920,
    height:1080,
});

const hanInitSize = () =>{
    const flag = true||orientation.value==='landscape-primary';
    const width = flag?document.body.clientWidth:document.body.clientHeight;
    const height =flag?document.body.clientHeight:document.body.clientWidth;
    
    const scaleX = width / sceneWidth;
    const scaleY = height / sceneHeight;
    configKonva.width = sceneWidth *scaleX;
    configKonva.height = sceneHeight * scaleY;
    bgImg.width = width;
    bgImg.height = height;
    configKonva.scale = { x: scaleX, y: scaleY };
}

// window.addEventListener('resize', hanInitSize);
onMounted(()=>{
    hanLoadeImages();
    // hanInitSize();
})
</script>

<style scoped lang="less">
// .box {

// }
</style>
